import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from './CaseProgress.module.less'

export default class CaseProgress extends Component {
  renderLine (i) {
    if (i !== 0) {
      return (
        <span className={style['progress-split']}>
          <span className={style['progress-point']} />
        </span>
      )
    }
  }

  renderList () {
    const { list, active } = this.props
    const activeIndex = list.indexOf(active)
    if (activeIndex === -1) {
      return <span className={`${style['progress-title']} ${style.current}`}>{active}</span>
    }
    return list.map((li, i) => {
      let cell = style['progress-cell']
      let title = style['progress-title']
      if (i <= activeIndex) {
        cell = `${cell} ${style.active}`
      }
      if (i === activeIndex) {
        title = `${title} ${style.current}`
      }
      return (
        <span className={cell} key={li}>
          {this.renderLine(i)}
          <span className={title}>{li}</span>
        </span>
      )
    })
  }

  render () {
    return (
      <div className={style.container}>
        <span className={style['progress-line']}>
          {this.renderList()}
        </span>
      </div>
    )
  }
}

CaseProgress.propTypes = {
  list: PropTypes.array,
  active: PropTypes.string
}

CaseProgress.defaultProps = {
  list: [],
  active: ''
}
